<template>
  <div class="rh-slideshow"
       :style="{
         width : width,
         height : height,
         }"
       @mouseenter="enter"
       @mouseleave="leave">
    <ul class="clearfix slide"
        :style="{
          width : ul_width,
          transform : `translateX(-${width})`
        }"
        ref="slide">
      <li><img :src="options[options.length-1].url"
             alt="轮播图"
             :style="{width : width}"></li>
      <li v-for="item in options"
          :key="item._id"><img :src="item.url"
             alt="轮播图"
             :style="{width : width}"></li>

      <li><img :src="options[0].url"
             alt="轮播图"
             :style="{width : width}"></li>
    </ul>
    <ul class="clearfix trigger">
      <li v-for="item in options.length"
          :key="item"
          :class="item==index?'isindex':''"
          @click="trigger=='click' ? trigger_click(item) : ''"
          @mouseenter="trigger=='hover' ? trigger_click(item) : ''">
        <span></span>
      </li>
    </ul>
    <span class="arror_left"
          @click="arror_left"
          v-show="!arror=='hover'">&lt;</span>
    <span class="arror_right"
          @click="arror_right"
          v-show="!arror=='hover'">&gt;</span>
  </div>
</template>

<script>
export default {
  props: {
    height: { // 高度
      type: String,
      default: '400px'
    },
    width: { // 宽度
      type: String,
      default: '1100px'
    },
    interval: { // 自动切换的时间间隔，单位为毫秒
      type: Number,
      default: 3000
    },
    options: { // 图片数组
      type: Array,
      required: true
    },
    trigger: {
      type: String,
      default: 'hover'
    },
    arror: {
      type: String,
      default: 'hover'
    }
  },
  data () {
    return {
      slide: '', // 轮播图
      timer: '', // 定时器
      distance: -Number.parseInt(this.width), // 图片的大小
      index: 1, // 索引
    }
  },
  computed: {
    ul_width () {
      return `${Number.parseInt(this.width) * (this.options.length + 2)}px`;
    }
  },
  mounted () {
    this.slide = this.$refs.slide; // 获取轮播图元素
    this.timer = setInterval(this.move, this.interval);
    this.$once('hook:beforeDestroy', () => {
      clearInterval(this.timer);
      this.timer = null;
    })
  },
  methods: {
    enter () {
      clearInterval(this.timer);
      this.timer = null;
    },
    leave () {
      this.timer = setInterval(this.move, this.interval);
    },
    move (flag = 'right') {
      if (flag != 'left') {
        this.index++; // 索引
        this.distance = -this.index * Number.parseInt(this.width);
        this.slide.style.transform = `translateX(${this.distance}px)`
        this.slide.style.transition = 'all .5s ease-in-out';
        if (this.distance == -Number.parseInt(this.width) * (this.options.length + 1)) {
          this.index = 1;
          setTimeout(this.reset(-Number.parseInt(this.width)), 500);
        }
      } else {
        this.index--; // 索引
        this.distance = -this.index * Number.parseInt(this.width);
        this.slide.style.transform = `translateX(${this.distance}px)`
        this.slide.style.transition = 'all .5s ease-in-out';
        if (this.distance == 0) {
          this.index = this.options.length;
          setTimeout(this.reset(-Number.parseInt(this.width) * this.options.length), 500);
        }
      }
    },
    reset (distance) {
      return () => {
        this.slide.style.transform = `translateX(${distance}px)`
        this.slide.style.transition = 'none';
      }
    },
    skip (distance) {
      this.slide.style.transform = `translateX(${distance}px)`
      this.slide.style.transition = 'all .5s ease-in-out';
    },
    trigger_click (index) {
      this.skip(-index * Number.parseInt(this.width)); // 点击跳转
      this.index = index;
    },
    arror_left () {
      this.move('left');
    },
    arror_right () {
      this.move('right');
    }
  }
}
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
.rh-slideshow {
  position: relative;
  margin: 0 auto;
  overflow: hidden;

  .slide {
    li {
      float: left;
    }
  }
  .trigger {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    li {
      float: left;
      width: 30px;
      padding: 12px 5px;
      cursor: pointer;

      span {
        display: block;
        border-bottom: 2px solid rgba(255, 255, 255, 0.6);
      }
    }
    .isindex {
      span {
        border-bottom: 2px solid #f10;
      }
    }
  }
  .arror_left,
  .arror_right {
    width: 36px;
    height: 36px;
    line-height: 36px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 18px;
    color: #fff;
    background-color: rgba(31, 45, 61, 0.11);
    border-radius: 50%;
    text-align: center;
  }
  .arror_left:hover,
  .arror_right:hover {
    background-color: rgba(31, 45, 61, 0.23);
  }
  .arror_left {
    left: 16px;
  }
  .arror_right {
    right: 16px;
  }
  .clearfix {
    content: "";
    display: block;
    clear: both;
  }
}
.rh-slideshow:hover {
  .arror_left {
    display: inline-block !important;
  }
  .arror_right {
    display: inline-block !important;
  }
}
</style>